import React from 'react';
import {ScrollView, View, Dimensions, TouchableOpacity, Text, findNodeHandle, UIManager} from 'react-native';

const {width, height} = Dimensions.get('window')

/**
 * ScrollView 滑动时，文字左移淡出等效果
 */

const viewOH =100;
const viewLH =40;
const textSize = 26;
export default class OnScrollDemo1 extends React.Component {

  componentDidMount() {
    const handle = findNodeHandle(this.refs);

    setTimeout(() => {
      UIManager.measure(handle, (x, y, width, height, pageX, pageY) => {
        this.refsY = y;
        this.refsX= x;
        console.log(' this.refsX', this.refsX)
      });
    }, 1000);

  }

  render() {
    return (
      <View >

          <Text
            ref={(ref) => this.refs = ref}
            style={{textAlign:'center',width: width, height: viewOH,lineHeight:viewOH,fontSize:textSize}}
            >第一个View</Text>
        <ScrollView
          scrollEventThrottle={1}
          onScroll={(e) => {
            const offsetY = e.nativeEvent.contentOffset.y
            console.log('offsetY', offsetY)
            console.log('this.refsY', this.refsY)
            if (offsetY - this.refsY > 0) {
              if(width-offsetY>90){
                const height = (width-offsetY)/width*(viewOH)
                const fontSize = (width-offsetY)/width*(textSize)
                this.refs.setNativeProps({
                  style:{
                    width:width-offsetY,
                    height:height,
                    lineHeight:height,
                    fontSize:fontSize,
                  }
                })
                console.log('viewOH-(width-offsetY)*0.3',height)
              }else {
                this.refs.setNativeProps({
                  style:{
                    width:90,
                    height:viewLH,
                    lineHeight:viewLH,
                    fontSize:16,

                  }
                })
              }

            } else {
              this.refs.setNativeProps({
                style:{
                  width:width,
                  height:viewOH,
                  lineHeight:viewOH,
                  fontSize:textSize,

                }
              })
            }
          }}>

          <View style={{
            backgroundColor: 'red', alignItems: 'center', justifyContent: 'center',
            width: width, height: 2000
          }}>
            <Text>第二个View</Text>
          </View>

        </ScrollView>
      </View>
    )
  }
}
